<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <!--
        指令的命名不要用驼峰用 - 隔开
        需求1: 定义一个v-big指令, 和v-text功能类似, 但会把绑定的数值放大10倍
        需求2: 定义一个v-fbind指令, 和v-bind功能类似, 但可以让其所绑定的input元素默认获取焦点
    -->
    <div id="root">
        <h2>当前的n值是: <span v-text="n"></span></h2>
        <h2>放大10倍后的n值是: <span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <hr>
        <input type="text" v-fbind:value="n">
    </div>

    <script>
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data: {
                n: 1
            },
            directives: {
                // 写为函数会在什么时候调用? 1.指令与元素成功绑定时(一上来,绑定不是渲染) 2.指令所在的模板被重新解析时
                big(element, binding) {
                    element.innerText = binding.value * 10
                },
                // 写为对象: 函数就是bind和update内容一样的场景 参数都是样的element 和 binding
                fbind: {
                    // 指令与元素绑定时(一上来), 只是绑定但是还没有渲染
                    bind(element, binding) {
                        element.value = binding.value
                    },
                    // 指令所在元素被插入页面时
                    inserted(element) {
                        element.focus()
                    },
                    // 指令所在模板被重新解析时
                    update(element, binding) {
                        element.value = binding.value
                    }
                }
            }
        })
    </script>
</body>
</html>